<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Form UI</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="../../../themes/light/light.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/light/light.form.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/dark/dark.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/dark/dark.form.css" type="text/css" />
<style type="text/css">
img { border:0px; }
a { outline:none; }
html, body { background:#222; margin:0; height:100%; overflow:auto; background:#FFF; font:10pt Calibri, Arial, san-serif; }
.light, .dark { width:50%; height:100%; float:left; }
.inner { margin: 0 4%; }
h1 { font:3em Cambria, Times new Roman, serif; margin:10px 0 0 0; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../ui.form.js"></script>
<script type="text/javascript"> $(function(){ $("form").form().submit(function(){ return false; }); }); </script>
</head><body>

<div class="light"><div class="inner">
  <h1>Light</h1>
  <form>
    <p><h2>Form UI</h2></p>
    <p><fieldset><legend>Fieldset/Legend</legend>&nbsp;</fieldset></p>
    <p><button>Button</button>
       <input type="button" value="Button" /></p>
    <p><input type="reset" value="Reset" />
       <input type="submit" value="Submit" /><p>
    <p><input type="checkbox" />
       <input type="checkbox" />
       <input type="checkbox" /></p>
    <p><input type="radio" name="dark" />
       <input type="radio" name="dark" />
       <input type="radio" name="dark" /></p>
    <p><input type="text" value="Text" /></p>
    <p><input type="password" value="Password" /></p>
    <p><input type="file" /></p>
    <p><textarea>text area</textarea></p>
    <p><select>
      <option>Select</option>
      <option>looks</option>
      <option>better</option>
    </select></p>
    <p><select type="combo">
      <option>Combo</option>
      <option>is awesome</option>
    </select></p>
    <p><select type="state">
      <option value="accept">./</option>
      <option value="deny">&times;</option>
      <option value="hold">&mdash;</option>
    </select></p>
  </form>
</div></div>

<div class="dark"><div class="inner">
  <h1>Dark</h1>
  <form>
    <p><h2>Form UI</h2></p>
    <p><fieldset><legend>Fieldset/Legend</legend>&nbsp;</fieldset></p>
    <p><button>Button</button>
       <input type="button" value="Button" /></p>
    <p><input type="reset" value="Reset" />
       <input type="submit" value="Submit" /><p>
    <p><input type="checkbox" id="first"/>
       <input type="checkbox" />
       <input type="checkbox" /></p>
    <p><input type="radio" name="dark" />
       <input type="radio" name="dark" />
       <input type="radio" name="dark" /></p>
    <p><input type="text" value="Text" /></p>
    <p><input type="password" value="Password" /></p>
    <p><input type="file" /></p>
    <p><textarea>text area</textarea></p>
    <p><select>
      <option>Select</option>
      <option>looks</option>
      <option>better</option>
    </select></p>
    <p><select type="combo">
      <option>Combo</option>
      <option>is awesome</option>
    </select></p>
    <p><select type="state">
      <option value="accept">./</option>
      <option value="deny">&times;</option>
      <option value="hold">&mdash;</option>
    </select></p>
  </form>
  <img src="../../../themes/dark/dark.form.png">
</div></div>

</body></html>
